<template>
  <div id="map" ref="chinaMapRef"></div>
</template>

<script lang="ts">
export default {
  name: "ChinaMap",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import jiangxiMap from "./jiangxi.json";

const chinaMapRef = ref();

// 必须注册地图
echarts.registerMap("jiangxi", jiangxiMap as any);

onMounted(() => {
  const myEchart = echarts.init(chinaMapRef.value);
  const option = {
    title: {
      text: "新冠疫情新增确诊数据",
      left: "center",
      top: 20,
    },
    series: {
      name: "疫情情况",
      type: "map",
      //   指定地图
      map: "jiangxi",
      //   可以将数据写在这里，也可以定义在外面
      label: {
        show: true,
      },
    },
    tooltip: {},
  };
  myEchart.setOption(option);
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 400px;
}
</style>
